<template>
	<view class="homebox">
		<!-- 		<view class="czname">
			测站信息
		</view> -->
		<!-- 分段器 -->
		<u-sticky offsetTop="0">
			<view class="" style="background-color: #f2f2f6;">
				<u-subsection :list="listSub" fontSize="18" mode="subsection" :current="currentSub" activeColor="#617fe2"
					@change="change3"></u-subsection>
			</view>
			
		</u-sticky>
		<view class="box_net" v-show="currentSub == 1">
			<view class="box_t" v-for="(i,index) in stationList" :key="index" @click="stationFn(i)">
				<view class="ti">
					{{i.name}}
				</view>
				<view class="flx">
					<view class="ie">
						<text>测线条数：</text>
						<text class="text">{{i.cexiantiaoshu}}</text>
					</view>
					<view class="ie">
						<text>渠底宽度：</text>
						<text class="text">{{i.qudikuandu}}</text>
					</view>
				</view>
				<view class="flx">
					<view class="ie">
						<text>测量方法：</text>
						<text class="text">{{i.morencefa}}点法</text>
					</view>
					<view class="ie" v-if="i.xingzhuang == 1">
						<text>断面形状：</text>
						<text class="text">矩形</text>
					</view>
					<view class="ie" v-if="i.xingzhuang == 0">
						<text>断面形状：</text>
						<text class="text">梯形</text>
					</view>
				</view>

			</view>
			
		</view>
		<!-- 本地数据 -->
		<view class="box_lo" v-show="currentSub == 0">
			<view class="czinput">
				<view class="lebox">
					名称：
				</view>
				<view class="leboxinput">
					<view class="">
						<uni-easyinput v-model="cezhanitem.name" placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view>
			<view class="czinput">
				<view class="lebox">
					编码：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.nub" placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view>
			<view class="hetop">
				<view class="titleclass">
					定位点
				</view>
			</view>
			<view class="czinput">
				<view class="lebox">
					经度：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.lot" placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
				<!-- 			<view class="" style="margin-left: 30rpx;">
							度
						</view> -->
			</view>
			<view class="czinput">
				<view class="lebox">
					纬度：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.lat" placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
				<!-- 			<view class="" style="margin-left: 30rpx;">
							度
						</view> -->
			</view>
			<view class="hetop">
				<view class="titleclass">
					测段参数
				</view>
			</view>
			<view class="czinput">
				<view class="lebox">
					断面形状：
				</view>
				<view class="">
					<uni-data-checkbox v-model="cezhanitem.xingzhuang" :localdata="range"></uni-data-checkbox>
				</view>
			</view>
			<view class="czinput">
				<view class="lebox">
					渠底宽度：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.qudikuandu" placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view>
			<view class="czinput">
				<view class="lebox">
					设计水深：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.shejishuishen" placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view>
			<view class="czinput">
				<view class="lebox">
					设计流量：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.shejiliuliang" placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view>
			<view class="czinput">
				<view class="lebox">
					上限水深：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.shangxianshuishen" placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view>
			<view class="czinput">
				<view class="lebox">
					下限水深：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.xiaxianshuishen" placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view>
			<view class="czinput">
				<view class="lebox">
					渠底纵坡：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.qudizongpo" placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view>
			<view class="czinput">
				<view class="lebox">
					渠坡糙率：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.qupocaolv" placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view>
			<view class="hetop">
				<view class="titleclass">
					边坡角度
				</view>
			</view>
			<view class="czinput">
				<view class="lebox">
					左坡角：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.lSA" placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view>
			<view class="czinput">
				<view class="lebox">
					右坡角：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.rSA" placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view>
			<view class="hetop">
				<view class="titleclass">
					标准测法
				</view>
			</view>

			<view class="czinput">
				<view class="lebox">
					测线布置：
				</view>
				<view class="">
					<uni-data-checkbox v-model="cezhanitem.cexianbuzhi" :localdata="range2"></uni-data-checkbox>
				</view>
			</view>
			<view class="czinput">
				<view class="lebox">
					默认测法：
				</view>
				<view class="">
					<uni-data-checkbox v-model="cezhanitem.morencefa" :localdata="range3"></uni-data-checkbox>
				</view>
			</view>
			<view class="hetop">
				<view class="titleclass">
					边坡系数
				</view>
			</view>
			<view class="czinput">
				<view class="lebox">
					左坡系数：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.kL" placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view>
			<view class="czinput">
				<view class="lebox">
					右坡系数：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.kR" placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view>
			<view class="czinput">
				<view class="lebox" style="width: 260rpx">
					水位修正：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.zijishuishenxiuzheng" placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view>
			<view class="hetop">
				<view class="titleclass">
					单条测线
				</view>
			</view>
			<view class="czinput">
				<view class="lebox">
					测线条数：
				</view>
				<view class="">
					<view class="" style="width: 300rpx">
						<uni-data-select :clear="false" v-model="cezhanitem.cexiantiaoshu" :localdata="range1"
							placeholder="请选择测线条数" @change="change1"></uni-data-select>
					</view>
				</view>
			</view>
			<view class="" style="height: 30rpx;">

			</view>
			<view class="qicebox">
				<view class="qicedian">
					测线
				</view>
				<view class="qicedian">
					坐标
				</view>
				<view class="qicedian">
					系数
				</view>
			</view>
			<view class="qicebox" v-for="(item,index) in cezhanitem.cexianlist" :key="index">
				<view class="qicinput">
					{{item.id}}
				</view>
				<view class="qicinput">
					<!-- {{item.zuobiao}} -->
					<u--input v-model="item.cR" placeholder="请输入内容" border="none"
						type="digit"></u--input>
				</view>
				<view class="qicinput">
					<!-- {{item.xishu}} -->
					<u--input v-model="item.vM" placeholder="请输入内容" border="none"
						type="digit"></u--input>
				</view>
			</view>
			<view class="czinput">
				<view class="lebox">
					流量系数：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.qk" placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view>
			<view class="czinput">
				<view class="lebox">
					水量系数：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.shuiliangxishu" placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view>
			<view class="hetop">
				<view class="titleclass">
					边坡测线流速系数
				</view>
			</view>
			<view class="czinput">
				<view class="lebox">
					左线系数：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.vmL" placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view>
			<view class="czinput">
				<view class="lebox">
					右线系数：
				</view>
				<view class="">
					<view class="">
						<uni-easyinput v-model="cezhanitem.vmR" placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
			</view>
			<view class="" style="height: 100rpx;">
				<u-button @click="saveCezhan" type="primary" shape="circle" text="保存到本地"></u-button>
			</view>
			<view class="" style="height: 100rpx;">

			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				listSub: ['修改数据', '网络列表'],
				currentSub: 1,
				cezhanitem: {
					id: null,
					name: "断面名称",
					nub: 'zlpzxcd',
					lot: '114.472177',
					lat: '38.10324',
					xingzhuang: 0,
					qudikuandu: '15.000',
					shejishuishen: '4.5',
					shejiliuliang: '100',
					shangxianshuishen: '4',
					xiaxianshuishen: '1',
					qudizongpo: '5',
					qupocaolv: '3',
					lSA: '27.000',
					rSA: '27.000',
					cexiantiaoshu: 0,
					cexianbuzhi: 1,
					morencefa: 1,
					kL: '0.95',
					kR: '0.95',
					zijishuishenxiuzheng: '1',
					cexianlist: [],
					qk: '1',
					shuiliangxishu: '1',
					vmL: '1',
					vmR: '1'
				},
				range: [{
					text: '梯形',
					value: 0
				}, {
					text: '矩形',
					value: 1
				}, ],
				range1: [{
						text: '1条测线',
						value: 1
					},
					{
						text: '2条测线',
						value: 2
					},
					{
						text: '3条测线',
						value: 3
					},
					{
						text: '4条测线',
						value: 4
					},
					{
						text: '5条测线',
						value: 5
					},
					{
						text: '6条测线',
						value: 6
					},
					{
						text: '7条测线',
						value: 7
					},
					{
						text: '8条测线',
						value: 8
					},
					{
						text: '9条测线',
						value: 9
					},
				],
				range2: [{
						text: '均匀',
						value: 1
					},
					{
						text: '不均匀',
						value: 2
					}
				],
				range3: [{
						text: '一点法',
						value: 1
					},
					{
						text: '三点法',
						value: 3
					}
				],
				stationList:[],
				InterfaceData:[]
			}
		},
		onLoad(option) {
			this.stationProFn()
		},
		onShow() {

		},
		methods: {
			// 分段器
			change3(index) {
				this.currentSub = index
			},
			// 选择测线
			change1(e) {
				this.cezhanitem.cexianlist.length = 0
				let arrdata = {
					cR: '',
					vM: ''
				}
				for (var i = 0; i < e; i++) {
					this.cezhanitem.cexianlist.push({
						id: 1 + i,
						cR: '',
						vM: ''
					})
				}

			},
			// 断面信息列表
			stationProFn(){
				uni.$u.http.get('/device/stationProfile/list').then(res => {
					if (res.code == 200) {
						let arr = res.rows
						for(let i=0;i<arr.length;i++){
							arr[i].cexianlist = JSON.parse(arr[i].cexianlist)
						}
						this.stationList = arr
						console.log('arr',arr);
					}
				}).catch(err => {
					console.log('错误', err);
				})
			},
			// 点击断面
			stationFn(i){
				this.currentSub = 0
				this.cezhanitem = i
				console.log('i',i);
			},
			// 保存测站信息
			saveCezhan() {
				if (this.cezhanitem.cexiantiaoshu == 0) {
					uni.showToast({
						title: '未选择测线',
						duration: 1500
					});
					return
				}
				let date = Date.parse(new Date())
				this.cezhanitem.id = date
				let datalist = []
				datalist = this.vuex_saveCezhandata
				datalist.push(this.cezhanitem)
				uni.$u.vuex('vuex_saveCezhandata', datalist)
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>
<style scoped lang="scss">
	// 网络列表
	.box_net {
		margin-top: 30rpx;
		.box_t {
			margin-bottom: 20rpx;
			border-radius: 20rpx;
			background-color: #f5f7f9;
			border: 3rpx solid #fff;
			box-shadow: 0 0 10rpx 5rpx rgba(183, 198, 221, 0.5);
			.ti {
				text-align: center;
				font-size: 45rpx;
				border-radius: 20rpx;
				color: #000000;
			}
			.flx {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx;
				.ie {
					color: #000000;
					width: 300rpx;
					padding: 10rpx;
					border-radius: 10rpx;
					background-color: #edf0f6;
					.text {
						font-size: 40rpx;
						color: #617fe2;
						font-weight: bold;
					}
					
				}
			}
		}
	}
	.titleclass {
		color: #4a659f;
	}

	.hetop {
		text-align: center;
		line-height: 60rpx;
		background-color: #e8f2fd;
		border-radius: 30rpx;
		font-size: 30rpx;
		font-weight: bold;
	}

	.homebox {
		width: 690rpx;
		padding: 0 30rpx;
		.czname {
			display: flex;
			justify-content: center;
			line-height: 100rpx;
			font-size: 40rpx;
			color: #5b769a;
		}

		.czinput {
			font-size: 35rpx;
			padding: 20rpx 20rpx;
			display: flex;
			align-items: center;
			border-radius: 0rpx;
			margin-bottom: 20rpx;

			.lebox {
				width: 180rpx;
			}
		}

		.qicebox {
			display: flex;
			justify-content: center;
			align-items: center;

			.qicedian {
				width: 200rpx;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				color: #484746;
				border: #dddcda solid 1rpx;
				background-color: #fafafa;
			}

			.qicinput {
				width: 160rpx;
				height: 100rpx;
				padding: 0 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				line-height: 100rpx;
				color: #7e7d7a;
				border: #dddcda solid 1rpx;
				background-color: #ffffff;
			}
		}
	}
</style>
<style>
	page {
		background-color: #f5f7f9;
	}
</style>